<template>
	<view v-if="dataObject.goodsList.hasOwnProperty('data')">
		<view v-if="dataObject.goodsList.data.length" class="diy-sharpGoods" :style="{ background: itemStyle.background }">
			<view class="sharp-top dis-flex flex-y-center">
				<view class="sharp-top--left flex-box dis-flex flex-y-center">
					<view class="sharp-modular dis-flex flex-y-center">
						<text class="suifont sui-miaosha-b"></text>
						<text class="modular-name">限时秒杀</text>
					</view>
					<view class="sharp-active-status">
						<text>{{ dataObject.active.sharp_modular_text }}</text>
					</view>
					<!-- 倒计时 -->
					<view v-if="dataObject.active.status == ActiveStatusEnum.STATE_BEGIN.value" class="active-count-down">
						<view class="clock dis-flex">
							<view class="clock-time">
								<text>{{ countDownList[0].dynamic.hou }}</text>
							</view>
							<view class="clock-symbol"><text>:</text></view>
							<view class="clock-time">
								<text>{{ countDownList[0].dynamic.min }}</text>
							</view>
							<view class="clock-symbol"><text>:</text></view>
							<view class="clock-time">
								<text>{{ countDownList[0].dynamic.sec }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="sharp-top--right">
					<form @submit="onTargetSharpIndex" report-submit="true">
						<button formType="submit" class="btn-normal dis-flex">
							<view class="sharp-more dis-flex flex-y-center">
								<text class="sharp-more-text">更多</text>
								<text class="sharp-more-arrow suifont sui-xiangyoujiantou"></text>
							</view>
						</button>
					</form>
				</view>
			</view>

			<view :class="'goods-list display__list clear column__' + itemStyle.column">
				<view class="goods-item" v-for="dataItem in dataObject.goodsList.data" :key="dataItem.sharp_goods_id">
					<form @submit="onTargetGoods" report-submit="true" :data-id="dataItem.sharp_goods_id">
						<button formType="submit" class="btn-normal">
							<view class="goods-item--container">
								<!-- 单列商品 -->
								<block v-if="itemStyle.column == 1"></block>
								<!-- 两列三列 -->
								<block v-else>
									<!-- 商品图片 -->
									<view class="goods-image"><image class="image" mode="aspectFill" :src="dataItem.goods_image"></image></view>
									<view class="detail">
										<!-- 商品标题 -->
										<view v:if=" itemStyle.show.goodsName " class="goods-name twolist-hidden">{{ dataItem.goods_name }}</view>
										<!-- 商品价格 -->
										<view class="detail-price onelist-hidden">
											<text v-if="itemStyle.show.seckillPrice" class="goods-price f-30 col-m">￥{{ dataItem.goods_sku.seckill_price }}</text>
											<text v-if="itemStyle.show.originalPrice && dataItem.goods_sku.original_price > 0" class="line-price col-9 f-24">￥{{ dataItem.goods_sku.original_price }}</text>
										</view>
									</view>
								</block>
							</view>
						</button>
					</form>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// 枚举类：秒杀活动商品状态
import ActiveStatusEnum from '@/utils/enum/sharp/GoodsStatus.js';
import CountDown from '@/utils/countdown.js';
export default {
	props: {
		itemIndex: String,
		itemStyle: Object,
		params: Object,
		dataObject: {
			default: () => {
				return { goodsList: { data: [] } };
			},
			type: Object
		}
	},
	data() {
		return {
			countDownList: [], // 倒计时
			ActiveStatusEnum
		};
	},
	created() {
		this.initCountDownData();
	},
	methods: {
		initCountDownData() {
			let active = this.dataObject.active;
			if (!active) return false;
			// 记录倒计时的时间
			this.countDownList[0] = { date: active.count_down_time };

			// 执行倒计时
			CountDown.onSetTimeList(this, 'countDownList');
		},
		onTargetGoods(e) {
			// 记录formid
			// 生成query参数
			let query = this.$u.queryParams({
				active_time_id: this.dataObject.active.active_time_id,
				sharp_goods_id: e.currentTarget.dataset.id
			}, 'true', 'comma')
			// 跳转到商品详情页
			this.navigateTo({
				url: '/pages/sharp/goods/index?' + query
			});
		},
		/**
		 * 更多秒杀
		 */
		onTargetSharpIndex(e) {
			// 记录formid
			// 跳转到秒杀会场首页
			this.navigateTo({
				url: '/pages/sharp/index/index'
			});
		}
	}
};
</script>

<style>
.diy-sharpGoods .sharp-top .sharp-modular {
	font-size: 30rpx;
	color: #fff;
	background: #fb571d;
	padding: 10rpx 30rpx 10rpx 24rpx;
	border-bottom-right-radius: 30rpx;
	border-top-right-radius: 30rpx;
}

.diy-sharpGoods .sharp-top .sharp-modular .modular-name {
	margin-left: 10rpx;
}

.diy-sharpGoods .sharp-top .sharp-active-status {
	color: #616161;
	font-size: 28rpx;
	margin-left: 20rpx;
}

.diy-sharpGoods .sharp-top .active-count-down {
	font-size: 26rpx;
	height: 40rpx;
	margin-left: 16rpx;
}

.diy-sharpGoods .sharp-top .active-count-down .clock-text {
	margin-right: 10rpx;
}

.diy-sharpGoods .sharp-top .active-count-down .clock-time {
	background: #252525;
	color: #fff;
	padding: 0 6rpx;
	line-height: 40rpx;
	border-radius: 8rpx;
}

.diy-sharpGoods .sharp-top .active-count-down .clock-symbol {
	padding: 0 8rpx;
}

.diy-sharpGoods .sharp-top .sharp-more {
	padding-right: 24rpx;
	color: #616161;
	font-size: 28rpx;
}

.diy-sharpGoods .sharp-top .sharp-more .sharp-more-arrow {
	font-size: 24rpx;
}

/* 商品组 */

.diy-sharpGoods .goods-list {
	padding: 4rpx;
	box-sizing: border-box;
}

.diy-sharpGoods .goods-list .goods-item {
	box-sizing: border-box;
	padding: 6rpx;
}

.diy-sharpGoods .goods-list.display__list .goods-item {
	float: left;
}

.diy-sharpGoods .goods-list.column__2 .goods-item {
	width: 50%;
}

.diy-sharpGoods .goods-list.column__3 .goods-item {
	width: 33.33333%;
}

.diy-sharpGoods .goods-list .goods-item .goods-image {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	overflow: hidden;
	background: #fff;
}

.diy-sharpGoods .goods-list .goods-item .goods-image:after {
	content: '';
	display: block;
	margin-top: 100%; /* margin 百分比相对父元素宽度计算 */
}

.diy-sharpGoods .goods-list .goods-item .goods-image .image {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-o-object-fit: cover;
	object-fit: cover;
}

.diy-sharpGoods .goods-list .goods-item .detail {
	padding: 4rpx;
	background: #fff;
}

.diy-sharpGoods .goods-list .goods-item .detail .goods-name {
	height: 72rpx;
	font-size: 28rpx;
	line-height: 1.3;
	overflow: hidden;
}

.diy-sharpGoods .goods-list .goods-item .detail .detail-price {
	line-height: 40rpx;
}

.diy-sharpGoods .goods-list .goods-item .detail .goods-price {
	font-size: 30rpx;
}

.diy-sharpGoods .goods-list .goods-item .detail .line-price {
	margin-left: 8rpx;
	font-size: 24rpx;
	text-decoration: line-through;
	color: #999;
}

.diy-sharpGoods .goods-list .goods-item .detail .selling-point {
	font-size: 24rpx;
	color: #f20c59;
}
</style>
